<template>
	<div class="purchaseProcessingCenterView">
		<div class="cardview">

				<div class="cardview-body">
					<div class="cardview-body-click">
						<el-date-picker
							v-model="pageQuery.startTime"
							type="datetime"
							placeholder="选择开始时间"
						>
						</el-date-picker>
						<el-date-picker
							v-model="pageQuery.endTime"
							type="datetime"
							placeholder="选择结束时间"
						>
						</el-date-picker>
						<el-select
							class="cardview-body-click-info-2"
							v-model="pageQuery.status"
							placeholder="请选择订单状态"
						>
							<el-option
								v-for="item in typeoptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
			      <el-divider direction="vertical"></el-divider>
						<el-button type="primary" icon="el-icon-search" @click="getdata">搜索</el-button>
						<el-button type="primary" @click="regetdata">重置</el-button>
					</div>

					<div class="cardview-body-table">
			      <el-table :data="bannersList" size="small" border fit
			        highlight-current-row>
							<el-table-column
								prop="id"
								label="订单id"
							></el-table-column>
			        <el-table-column
								prop="startsPoint"
								label="订单状态"
							>
								<template slot-scope="scope">
									{{ scope.row.status | restatus}}
								</template>
							</el-table-column>
							<el-table-column
								prop="startsPoint"
								label="支付方式"
							>
								<template slot-scope="scope">
									{{ scope.row.payType }}
								</template>
							</el-table-column>
							<el-table-column
								prop="startPointName"
								label="订单起点名称"
							></el-table-column>
							<el-table-column
								prop="startPoint"
								label="订单起点经纬度"
							></el-table-column>

							<el-table-column
								prop="startsPoint"
								label="起点图片"
							>
								<template slot-scope="scope">
									<img
										:src="scope.row.startPointImages"
										class="cardview-body-table-img"
										alt
										srcset
									/>
								</template>
							</el-table-column>

							<el-table-column
								prop="endPointName"
								label="订单终点名称"
							></el-table-column>
							<el-table-column
								prop="endPoint"
								label="订单终点经纬度"
							></el-table-column>

							<el-table-column label="终点图片">
								<template slot-scope="scope">
									<img
										:src="scope.row.startPointImages"
										class="cardview-body-table-img"
										alt
										srcset
									/>
								</template>
							</el-table-column>
							<el-table-column
								prop="carType"
								label="订单所需车型"
							></el-table-column>
							<el-table-column label="订单所需车车长">
								<template slot-scope="scope">{{scope.row.carLength}}</template>
							</el-table-column>
							<el-table-column
								prop="cargoType"
								label="货物类型"
							></el-table-column>
							<el-table-column
								prop="cashDeposit"
								label="保证金"
							></el-table-column>
							<el-table-column
								prop="price"
								label="运费"
							></el-table-column>
							<el-table-column
								label="操作"
								fixed="right"
			          width="100"
							>
								<template slot-scope="scope">
									<div >
			              <el-button
											size="mini"
											type="text"
											@click="changeordertype1(scope.row)"
										>发布该订单</el-button>
										<el-button
											size="mini"
											type="text"
											@click="changeordertype(scope.row)"
										>修改状态</el-button>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>

					<div class="cardview-body-changepage">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="pageQuery.pageNum"
							:page-sizes="[10, 20, 30, 40]"
							:page-size="pageQuery.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="allCount"
						></el-pagination>
					</div>
				</div>
		</div>

    <el-dialog
			title="发布订单"
			:visible.sync="changedialogVisible1"
			:before-close="handleClose"
			append-to-body
		>
			<div class="dialogtochange">
				<el-row style="margin:10px 0">
					<el-col :span="5">保证金：</el-col>
					<el-col :span="19">
						<el-input v-model="changequery.cashDeposit" type="number" placeholder="请输入保证金数额"></el-input>
					</el-col>
				</el-row>
        <el-row style="margin:10px 0">
					<el-col :span="5">运费：</el-col>
					<el-col :span="19">
						<el-input v-model="changequery.price" type="number" placeholder="请输入保证金数额"></el-input>
					</el-col>
				</el-row>
			</div>
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button @click="changedialogVisible1 = false">取 消</el-button>
				<el-button
					type="primary"
					@click="toupdatausertoide1"
				>确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog
			title="修改权限"
			:visible.sync="changedialogVisible"
			:before-close="handleClose"
			append-to-body
		>
			<div class="dialogtochange">
				<el-row>
					<el-col :span="12">选择要修改的状态：</el-col>
					<el-col :span="12">
						<el-select
							v-model="infodatastatus"
							placeholder="请选择"
						>
							<el-option
								v-for="item in typeoptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</el-col>
				</el-row>
			</div>
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button @click="changedialogVisible = false">取 消</el-button>
				<el-button
					type="primary"
					@click="toupdatausertoide"
				>确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>


<script>
	import {
		selectOrderByCondition,
    updateOrderStatusById,
    updateOrderById
	} from "../../../api/orderManagement";
	export default {
		data() {
			return {
				pageQuery: {
					startTime: null,
					endTime: null,
					status: null,
					pageNum: 1,
					pageSize: 10,
        },
        changequery:{
          cashDeposit:null,
          price:null
        },
				options: [
					{
						value: "1",
						label: "普通用户",
					},
					{
						value: "6",
						label: "后台用户",
					},
					{
						value: "8",
						label: "系统管理员",
					},
					{
						value: "9",
						label: "车主",
					},
				],
				typeoptions: [
					{
						value: 1,
						label: "已发布",
					},
					{
						value: 2,
						label: "已审核",
					},
					{
						value: 3,
						label: "待审核",
					},
					{
						value: 4,
						label: "已接货",
					},
					{
						value: 5,
						label: "已完成",
					},
					{
						value: 6,
						label: "已撤销",
					},
					{
						value: 7,
						label: "车主抢单成功",
					},
				],
				bannersList: null,
				allCount: null,
				infodata: null,
				infodatastatus: null,
        changedialogVisible: false,
        changedialogVisible1: false,
			};
		},
		mounted() {
			this.getdata();
    },
    filters:{
      restatus:function(e){
        if (e == 1) {
          return '已发布'
        }
        if (e == 2) {
          return '已审核'
        }
        if (e == 3) {
          return '待审核'
        }
        if (e == 4) {
          return '已接货'
        }
        if (e == 5) {
          return '已完成'
        }
        if (e == 6) {
          return '已撤销'
        }
        if (e == 6) {
          return '车主抢单成功'
        }
      }
    },
		methods: {
			getdata() {
				selectOrderByCondition(this.pageQuery).then((res) => {
					if (res.code == 200) {
						this.bannersList = res.data.selectOrderByCondition;
						this.allCount = res.data.allCount;
					}
				});
			},
			regetdata() {
				(this.pageQuery = {
					startTime: null,
					endTime: null,
					status: null,
					pageNum: 1,
					pageSize: 10,
				}),
					this.getdata();
			},
			toupdatausertoide() {
				if (!this.infodatastatus) {
					this.$message({
						message: "请选择修改的状态",
						type: "warning",
          });
          return
				}
				let a = {
					id: this.infodata.id,
					status: this.infodatastatus,
				};
				updateOrderStatusById(a)
					.then((res) => {
						if (res.code == 200) {
							this.$message({
								message: "修改成功",
								type: "success",
							});

							this.handleClose();
						}
					})
					.catch((err) => {});
      },
      toupdatausertoide1() {
				if (!this.changequery.cashDeposit) {
					this.$message({
						message: "请输入保证金",
						type: "warning",
          });
          return
        }
        if (!this.changequery.price) {
					this.$message({
						message: "请输入运费",
						type: "warning",
          });
          return
        }
				let a = {
					id: this.infodata.id,
          price: this.changequery.price,
          cashDeposit:this.changequery.cashDeposit
				};
				updateOrderById(a)
					.then((res) => {
						if (res.code == 200) {
              this.fabu()
						}
					})
					.catch((err) => {});
      },
      //发布逻辑
      fabu(){
        	let a = {
					id: this.infodata.id,
					status: 2,
				};
				updateOrderStatusById(a)
					.then((res) => {
						if (res.code == 200) {
							this.$message({
								message: "修改成功",
								type: "success",
							});

							this.handleClose();
						}
					})
					.catch((err) => {});
      },
			//修改状态获取信息
			changeordertype(e) {
				this.infodata = e;
				this.changedialogVisible = true;
      },
      changeordertype1(e){
        this.infodata = e;
				this.changedialogVisible1 = true;
      },
			//页面跳转
			handleSizeChange(val) {
				this.pageQuery.pageSize = val;
				this.getdata();
			},
			//规格跳转
			handleCurrentChange(val) {
				this.pageQuery.pageNum = val;
				this.getdata();
			},
			//修改权限后的逻辑
			handleClose() {
				this.infodata = null;
				this.infodatastatus = null;
        this.changedialogVisible = false;
        this.changedialogVisible1 = false;
        this.changequery = {
          cashDeposit:null,
          price:null
        },
				this.getdata();
			},
		},
	};
</script>


<style lang="less" scoped>
	.purchaseProcessingCenterView {
		// padding: 20px;
		// overflow: auto;
		// height: 83%;

		.headerText {
			font-size: 25px;
			font-weight: bold;
		}

		.cardview-body {
			.cardview-body-click {
				.cardview-body-click-info {
					display: flex;
					align-items: center;

					.cardview-body-click-info-1 {
						padding-right: 10px;
					}

					.cardview-body-click-info-2 {
						flex: 7;
						padding-right: 10px;
					}
				}
			}

			.cardview-body-table {
				padding: 20px 0 0 0;

				.cardview-body-table-title {
					font-size: 20px;
					font-weight: bold;
					padding-top: 20px;
					padding-bottom: 20px;
					border-top: 1px solid #eeeeee;
					border-bottom: 1px solid #eeeeee;
				}

				.cardview-body-table-img {
					width: 100px;
				}
			}
		}

		.cardview-body-changepage {
			padding: 30px 20px 0 0;
			text-align: right;
		}
	}
</style>
